import React, { Component } from "react";
import { SubmitApi } from "@/request/api"
import { showYTKAlert, alertDispatchFn } from "@/utils"
import { connect } from 'react-redux'
import "./Danxuan.less"

class Danxuan extends Component {
    state = {
        answer: "",
        // 选项列表:
        chooseArr: [],
        // 是否选中
        isChoose: "",
        // 显示答案:
        isShowAnswer: false,
        isShow: false
    }
    componentDidMount() {
        let content = this.props.test.optionContent
        this.setState({
            chooseArr: JSON.parse(content || "[]")
        })
    }

    // 点击不同选项
    clickChooseFn(key) {
        this.setState({
            isChoose: key
        })
    }

    render() {
        let test = this.props.test;
        let actionCode = this.props.actionCode
        return (
            <div style={{ display: test.questionType === "one" ? "block" : "none" }}>
                <div className="timu_question">
                    <span>单选</span>
                    <p>{test.title}</p>
                </div>
                {
                    this.state.chooseArr.map(item =>
                        <div className="timu-xuanxiang" key={item.key}>
                            <div onClick={this.clickChooseFn.bind(this, item.key)}>
                                <span className="iconfont icon-normal"
                                    style={{
                                        display:
                                            this.state.isChoose === item.key ? "none" : "block"
                                    }}
                                ></span>
                                <span
                                    style={{
                                        display:
                                            this.state.isChoose !== item.key ? "none" : "block"
                                    }}
                                    className="iconfont icon-danxuanxiangxuanzhong"></span>
                            </div>
                            <p>{`${item.key} 、${item.value}`}</p>
                        </div>

                    )
                }
                <div className="timu_submit" onClick={this.submitFn.bind(this, test, actionCode)}>确定</div>

                <div>
                    <section className="answer_right" style={{ display: this.state.isShow ? "block" : "none" }}>
                        <i className="iconfont icon-ceshijieguo-dui"></i> 回答正确
                    </section>
                    <section className="answer_error">
                        <section style={{ display: this.state.isShowAnswer ? "block" : "none" }}>
                            <i className="iconfont icon-cuowu"></i> 回答错误
                    </section>
                    </section>

                </div>

                <div style={{ display: this.state.isShowAnswer ? "block" : "none" }}>
                    <div className="timu-answer">
                        <span>答案:</span>
                        <p>{test.answer}</p>
                    </div>
                </div>
            </div>
        );
    }

    async submitFn(test, actionCode) {
        console.log(this.state.isChoose);
        console.log(this.props.test.answer);
        if (this.state.isChoose === "") {
            showYTKAlert(this.props, "error", "请给出你的选项");
            return
        }
        //点击确认提交
        if (this.state.isChoose !== this.props.test.answer) {
            this.setState({
                isShowAnswer: true,
                isShow: false
            })
        }

        if (this.state.isChoose === this.props.test.answer) {
            this.setState({
                isShow: true,
                isShowAnswer: false
            })
        }

        let res = await SubmitApi({
            actionType: "exam_test",
            actionCode,
            id: test.id,
            categoryCode: test.categoryCode,
            userAnswer: this.state.isChoose
        })
        // 给出提示,提交成功
        showYTKAlert(this.props, "success", "提交成功");
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        ...alertDispatchFn(dispatch)
    }
}

export default connect(null, mapDispatchToProps)(Danxuan)
